<template>
  <div>
    <el-card>
      <el-row type="flex" justify="space-between">
        <el-col :span="20">
          <h1>作业范围分配</h1>
        </el-col>
        <el-col :span="2" v-if="buttonShow1">
          <el-button type="danger" @click="edit">编辑</el-button>
        </el-col>
        <el-col :span="4" v-if="buttonShow">
          <el-button type="danger">保存</el-button>
          <el-button @click="edit1">取消</el-button>
        </el-col>
      </el-row>
      <el-row>
        <el-form>
          <el-form-item label-width="100px" label="地区关键字：">
            <el-input placeholder="请输入地区关键字" v-model="change" style="width: 300px"/>
          </el-form-item>
        </el-form>
      </el-row>
      <el-row v-if="buttonShow2">
        <el-button type="danger" @click="edit2">开始绘制</el-button>
      </el-row>
      <el-row v-if="buttonShow3">
        <el-button type="danger" @click="edit3">完成绘制</el-button>
        <el-button @click="edit4">删除围栏</el-button>
      </el-row>
      <el-row v-if="alertshow">
        <el-alert
          title="当前越秀区营业部下暂无作业范围"
          type="warning"
          center
          show-icon/>
      </el-row>
      <el-row v-if="alertshow1">
        <el-alert
          title="点击或拖动鼠标绘制电子围栏，右击鼠标结束图形绘制，图形不可有交叉点。完成绘制后，点击提交按钮保存。仅支持绘制单个电子围栏区域"
          type="warning"
          show-icon/>
      </el-row>
      <el-row>
<!--        百度地图-->
         <baidu-map class="map" center="北京"></baidu-map>
        <baidu-map
          class="map"
          :center="{lng: longitude, lat: latitude}"
          :zoom="15"
          :scroll-wheel-zoom="true"
          style="height: 100vh"
          @click="addPolygonPoint"
        >
          <bm-local-search :keyword="change" :auto-viewport="true"></bm-local-search>
          <bm-polygon
            :edit="false"
            :path="polygonPath"
            :stroke-opacity="0.5"
            :stroke-weight="2"
            :editing="true"
            stroke-color="#e85552"
            fill-color="rgba(232,85,82,0.30)"
            :click="addPolygonPoint"
            @lineupdate="updatePolygonPath"
          />
        </baidu-map>

      </el-row>
    </el-card>
  </div>
</template>

<script>
import { getRangListApi } from '@/api/rang'

export default {
  name: 'Range',
  data () {
    return {
      buttonShow: false,
      buttonShow1: true,
      buttonShow2: false,
      buttonShow3: false,
      alertshow: true,
      alertshow1: false,
      change: '',
      polygonPath: [
      ],
      latitude: '',
      longitude: ''
    }
  },
  created () {
    this.getRange()
  },
  methods: {
    edit () {
      this.buttonShow = true
      this.buttonShow1 = false
      this.buttonShow2 = true
      this.alertshow = false
      this.alertshow1 = true
    },
    edit1 () {
      this.buttonShow = false
      this.buttonShow1 = true
      this.buttonShow2 = false
      this.buttonShow3 = false
      this.alertshow = true
      this.alertshow1 = false
    },
    edit2 () {
      this.buttonShow2 = false
      this.buttonShow3 = true
    },
    edit3 () {
      this.buttonShow2 = true
      this.buttonShow3 = false
    },
    edit4 () {
      this.buttonShow2 = true
      this.buttonShow3 = false
    },
    // 添加多边形点
    addPolygonPoint (e) {
      this.polygonPath.push(e.point)
    },
    // 更新多边形路径
    updatePolygonPath (e) {
      this.polygonPath = e.target.getPath()
      console.log(this.polygonPath)
    },
    // 获取员工工作范围
    async getRange () {
      // console.log(this.$route.query.id)
      const res = await getRangListApi(this.$route.query.id)
      console.log(res)
      this.latitude = res.data.latitude
      this.longitude = res.data.longitude
    }
  }
}
</script>
